import React, { useEffect, useState } from 'react'
import { get } from '../../util/get';
import { post } from "../../util/post";
import { message, Card, Empty, Row, Col, Button,Pagination,Modal } from 'antd'
import { CheckOutlined,CloseOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import style from "./index.module.css"
const { Meta } = Card;
const { confirm } = Modal;
function Application() {
  const token = localStorage.getItem('TOKEN')
  const [list, setList] = useState([])
  const [page, setPage] = useState(1)
  const [total,setTotal]=useState(0)
  const getApplyList = async()=>{
    const res = await get(`/shop/auditrecord/applyList?status=0&page=${page}&limit=6`, token)
    const {code,msg,page:{list,totalCount}} = res.data
    if (code === 0) {
        setList(list)
        setTotal(totalCount)
      }
      else message.error(msg)
  }
  useEffect(() => {
    getApplyList()
  }, [token,page])
  const showConfirm =(type,id)=>{
    confirm({
      title: type===0?'您确定要驳回这条申请吗？':'您确定要通过这条申请吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        type===0?handleRefuse(id):handleApply(id)
      },
      onCancel() {
      },
    });
  }
  const handleApply =async (id) => {
    const res =await post('/shop/auditrecord/audit',
      { id, 
        status: 1, 
        message: "审核通过" },token)
    if(res.data.code ===0) {
      message.success(res.data.msg)
      getApplyList()
    } 
    else message.error(res.data.msg)
  }
  const handleRefuse = async(id)=>{
    // console.log(id)
    const res =await post('/shop/auditrecord/audit',
    { id, 
      status: 3, 
      message: "驳回申请" },token)
  if(res.data.code ===0) {
    message.success(res.data.msg)
    getApplyList()
  } 
  else message.error(res.data.msg)
  }
  const renderApply = ()=>{
    return (
        list.map(item => {
          const { id, image, name, address, phone } = item
          return (
            <Col span={6} key={id}>
              <Card
                hoverable
                style={{
                  width: 300,
                  height: 470
                }}
                cover={<img width={300} height={300} alt="example" src={image} />}
                actions={
                  [
                    <CheckOutlined key="yes" onClick={() => showConfirm(1,id)}/>
                    ,<CloseOutlined key="refuse" onClick={() => showConfirm(0,id)} />
                  ]
                }
              >
                <Meta title={name} description={
                  <Row align='center'>
                      <div>地址：{address}</div>
                      <div>电话：{phone}</div>
                  </Row>
                } />
              </Card>
            </Col>
          )
        })
    )
  }
  const renderEmpty = ()=>{
    return(
      <Empty className={style.empty} image={Empty.PRESENTED_IMAGE_SIMPLE} />
    )
  }
  return (
    <div>
      <Row gutter={[8, 16]} className={style.storelist}>
        {
          list.length===0?renderEmpty():renderApply()
        }
      </Row>
      <Pagination 
            className={style.pagination}
            current={page} defaultPageSize={8} 
            total={total} onChange={page=>{
                setPage(page);
            }}/>
    </div>
  )

}

export default Application;
